<template>
	<Header></Header>
	<section>
		<div class="list-left">
			<ul>
				<li :class="{active:index === selectCategoryIndex}" v-for="(item,index) in leftData" :key="item.id" @click="selectCategory(index)">
					{{item.name}}
				</li>
				<!-- <li>蔬菜</li>
				<li>水果</li>
				<li>豆制品</li>
				<li>家禽</li> -->
			</ul>
		</div>
		<div class="list-right">
			<ul>
				<li v-for="(item,index) in getRightData" :key="index">
					<img :src="item.imgUrl" alt="" />
					<span>{{item.name}}</span>
				</li>
				<!-- <li>
					<img src="/images/goods-2.jpg" alt="" />
					<span>根茎类</span>
				</li>
				<li>
					<img src="/images/goods-1.jpg" alt="" />
					<span>叶菜类</span>
				</li>
				<li>
					<img src="/images/goods-2.jpg" alt="" />
					<span>根茎类</span>
				</li> -->
			</ul>
		</div>
	</section>
</template>

<script setup>
	import Header from '@/components/Sort/Header.vue'
	// 渲染一级二级菜单
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import http from '@/common/api/request.js'
	let leftData = ref([])
	let rightData = ref([])
	onMounted(() => {
		sortData()
	})
	const sortData = async () => {
		let res = await http.$axios({
			url: '/api/index/sortList'
		})
		console.log(res)
		const leftArr = []
		const rightArr = []
		res.forEach(v => {
			leftArr.push({
				id: v.id,
				name: v.name
			})
			rightArr.push(v.data)
		})
		leftData.value = leftArr
		rightData.value = rightArr
	}
	// 点击一级菜单
	const selectCategoryIndex = ref(0)
	const selectCategory = (index) => {
		selectCategoryIndex.value = index
	}
	const getRightData = computed(() => {
		return rightData.value[selectCategoryIndex.value] || []
	})
</script>

<style scoped>
	section {
		display: flex;

	}

	.list-left {
		width: 2.5rem;
		background-color: #f1f1f1;
	}

	.list-left li {
		font-size: 16px;
		padding: 10px 0;
		text-align: center;
	}

	.active {
		color: red;
		background-color: white;
	}

	.list-right ul {
		width: 7.5rem;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		background-color: white;
		overflow: hidden;
	}

	.list-right li {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px 15px;
	}

	.list-right img {
		width: 1.5rem;
		height: 1.5rem;
		border-radius: 45px;
	}

	.list-right span {
		font-size: 14px;
		margin-top: 5px;
	}
</style>